<%@ page import="com.sunelec.pojo.Users" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
    <title>电站数据比较</title>
    <meta name="renderer" content="webkit" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/dataCompare.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
</head>
<body>
<div class="top">
    <div class="top-left">
        <div class="kong"></div>
        <div class="logo">
            <img src="${pageContext.request.contextPath}/static/imgs/logo3.png">
        </div>
    </div>
    <div class="top-right">
        <ul class="list">
            <li><a href="${pageContext.request.contextPath}/powerCenter.action?username=${username}">电站中心</a></li>
            <li><a href="checkCenter.jsp">运维中心</a></li>
            <li><a href="${pageContext.request.contextPath}/InReportCenter">报表中心</a></li>
            <li><a href="${pageContext.request.contextPath}/centralizedControl">展示中心</a></li>
            <% if(session.getAttribute("users")!=null){
                Users users = (Users)session.getAttribute("users");
            %>
            <% if(users.getType()==1){%>
            <li><a href="${pageContext.request.contextPath}/InidManage">账号管理</a></li>
            <% }%>
            <% } %>
            <li><a href="${pageContext.request.contextPath}/checkOut.action" ><span class="fa fa-user"></span></a></li>
        </ul>
    </div>
</div>
<div class="main" id="main">
    <div class="left">
        <div class="side" id="tab">
            <div class="box">
                <button><span>电站功率</span></button>
            </div>
            <div class="box">
                <button><span>日电量</span></button>
            </div>
            <div class="box">
                <button><span>总电量</span></button>
            </div>
        </div>
    </div>
    <div class="center">
        <div class="cenTop"></div>
        <div class="content">
            <c:forEach var="list" items="${comparePowerList}">
                <div class="box">
                    <div class="chart" id="${list.powerId}+1">
                        <script type="text/javascript">
                            var myChart=echarts.init(document.getElementById('${list.powerId}+1'));
                            option = {
                                title:{
                                    text:'${list.powerName}',
                                    left:'left',
                                    show:true,
                                    subtext:'电站功率(单位：w)',
                                    textStyle:{
                                        color:'darkgray',
                                        fontSize:12
                                    }
                                },
                                tooltip:{
                                    trigger: 'axis',
                                },
                                toolbox: {
                                    feature: {
                                        dataZoom: {
                                            yAxisIndex: 'none'
                                        },
                                        restore: {},
                                        saveAsImage: {},
                                    },
                                    right:'25px',
                                    top:'5px'
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: ${list.current_power_time},
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color:'darkgray',
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: 'darkgray',
                                            fontSize:12
                                        }
                                    }
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color:'darkgray'
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: 'darkgray',
                                            fontSize:8

                                        }
                                    },
                                    axisTick: {
                                        show: false
                                    }
                                },
                                series: [{
                                    data: ${list.current_power},
                                    type: 'line',
                                    smooth:true,
                                    symbol: 'none',
                                    sampling: 'average',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(106,220,164)'
                                        }
                                    },
                                    areaStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: 'rgb(139,233,183)'
                                            }, {
                                                offset: 1,
                                                color: 'rgb(139,233,183)'
                                            }])
                                        }
                                    }
                                }],
                            };
                            myChart.setOption(option);
                        </script>
                    </div>
                </div>
            </c:forEach>
        </div>
        <div class="content" style="display: none" >
            <c:forEach var="d" items="${comparePowerList}">
                <div class="box">
                <div class="chart" id="${d.powerId}+2">
                    <script type="text/javascript">
                        var myChart=echarts.init(document.getElementById('${d.powerId}+2'));
                        option = {
                            title:{
                                text:'${d.powerName}',
                                left:'left',
                                show:true,
                                subtext:'日电量(单位：w)',
                                textStyle:{
                                    color:'darkgray',
                                    fontSize:12
                                }
                            },
                            tooltip:{
                                trigger:'axis'
                            },

                            xAxis:{
                                data:${d.nowDay},
                                axisLine: {
                                    lineStyle: {
                                        type: 'solid',
                                        color:'darkgray',
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: 'darkgray',
                                        fontSize:12
                                    }
                                }
                            },
                            yAxis:{
                                axisLine: {
                                    lineStyle: {
                                        type: 'solid',
                                        color:'darkgray',
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: 'darkgray',
                                        fontSize:8
                                    }
                                },
                                axisTick: {
                                    show: false
                                }
                            },
                            series:[{
                                name:'日电量',
                                type:'bar',
                                data:${d.dailyElec},
                                barWidth : 50,
                                itemStyle:{
                                    normal:{
                                        color: 'rgb(106,220,164)'
                                    }
                                }
                            }]
                        };
                        myChart.setOption(option);
                    </script>
                </div>
            </div>
            </c:forEach>
        </div>
        <div class="content" style="display: none" >
            <c:forEach var="z" items="${comparePowerList}">
                <div class="box">
                    <div class="chart" id="${z.powerId}+3">
                        <script type="text/javascript">
                            var myChart=echarts.init(document.getElementById('${z.powerId}+3'));
                            option = {
                                title:{
                                    text:'${z.powerName}',
                                    left:'left',
                                    show:true,
                                    subtext:'总电量(单位：w)',
                                    textStyle:{
                                        color:'darkgray',
                                        fontSize:12
                                    }
                                },
                                tooltip:{
                                    trigger:'axis'
                                },

                                xAxis:{
                                    data:['总电量'],
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color:'darkgray',
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: 'darkgray',
                                            fontSize:12
                                        }
                                    }
                                },
                                yAxis:{
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color:'darkgray',
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: 'darkgray',
                                            fontSize:8
                                        }
                                    },
                                    axisTick: {
                                        show: false
                                    }
                                },
                                series:[{
                                    name:'总电量',
                                    type:'bar',
                                    data:${z.allElec},
                                    barWidth : 50,
                                    itemStyle:{
                                        normal:{
                                            color: 'rgb(106,220,164)'
                                        }
                                    }
                                }]
                            };
                            myChart.setOption(option);
                        </script>
                    </div>
                </div>
            </c:forEach>

        </div>
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
//        tab选项卡
        var tab=document.getElementById('tab');
        var lis=tab.getElementsByClassName('box');
        var content=document.getElementsByClassName('content');
        for(var i=0;i<lis.length;i++){
            lis[i].xuhao=i;
            lis[i].onclick=function () {
                for(var j=0;j<content.length;j++){
                    content[j].style.display='none';
                }
                content[this.xuhao].style.display='block';
                content[this.xuhao].style.display='flex';
                content[this.xuhao].style.flexDirection='row';
            }
        }
    }
</script>
</body>
</html>
